<script setup lang="ts">
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import { computed } from "vue";

const props = withDefaults(
  defineProps<{ title?: string; width?: number; height?: number; borderShadow?: boolean; dark?: boolean; slotTitleWidth?: number | string }>(),
  {
    title: "",
    width: 330,
    height: 200,
    borderShadow: false,
    dark: false
  }
);

const title_height = computed(() => (props.title ? "38px" : "0px"));
</script>

<template>
  <div :class="['model-box', borderShadow ? 'borderShadow' : '', dark ? 'model-box-dark' : '']">
    <modelTitle v-if="title" :title="title" :dark="dark" :slotTitleWidth="slotTitleWidth">
      <template #middleTitle>
        <slot name="middleTitle" />
      </template>
      <template #default>
        <slot name="title" />
      </template>
    </modelTitle>
    <div class="model-box-content"><slot /></div>
  </div>
</template>

<style lang="scss" scoped>
.model-box {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;

  .model-box-content {
    width: 100%;
    height: calc(100% - v-bind(title_height));
  }
}

.borderShadow {
  box-shadow: 0 0 10px rgb(0 37 86 / 12%);
}

.model-box-dark {
  color: #fff;
  background-color: #001e3bff;
  // background-color: transparent;
  border: 1px solid #83b2ffff;
  box-shadow: inset 0 0 10px 0 #83b2ffff;
}
</style>
